<template>
	<view>
		<nav-bar class="header" title="纤芯管理" @goBack="goBack"></nav-bar>
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore"
				:immediate-check='false'>
				<view class="cable-list">
					<view class="cable-item" v-for="(item,index) in fiberCoreList" :key="index"
						@click="jumpDetail(item.objId)">
						<!-- 标题行 -->
						<view class="cable-title">
							<view class="cable-title-left">
								<view class="cable-title-img">
									<image src="../../../../static/img/ydtz-opticalIcon.png" mode=""></image>
								</view>
								<view class="cable-title-name">
									{{item.sn}}
								</view>
							</view>
							<view class="title-icon" :class="item.occupyState == '5' ? 'green': 'red'">
								{{item.occupyState == '5'?'未占用':'已占用'}}
							</view>
						</view>
						<!-- 文本行 -->
						<view class="cable-text" v-if="item.lightPathName">
							光路名称：
							<span>
								{{item.lightPathName}}
							</span>
						</view>
					</view>
				</view>
			</van-list>
		</van-pull-refresh>
	</view>
</template>

<script>
	import navBar from "../../../../components/common/nav-bar.vue";
	import {
		getFibreCoreList
	} from "../../../../api/ydtzApi.js"
	export default {
		data() {
			return {
				refreshing: false, // 是否正在刷新
				finished: false,
				isLoading: false,
				total: 0, // 总条数
				page: 1,
				limit: 10,
				fiberCoreList: [],
				siteId: '',
				objId: ''
			}
		},
		components: {
			navBar
		},
		onLoad(option) {
			this.siteId = option.siteId,
			this.objId = option.objId
			this.onRefresh()
		},
		methods: {
			// 获取列表
			getTaskListByAdminT() {
				let params = {
					pageSize: this.limit,
					pageNum: this.page,
					siteId: this.siteId,
					objId: this.objId
				}
				this.$apiRequest.ydtzApi.getFibreCoreList(params)
					.then(({
						data: res
					}) => {
						this.fiberCoreList = this.fiberCoreList.concat(res.rows);
						this.isLoading = false;
						// this.refreshing = false;
						this.total = res.total
						if (this.total > this.fiberCoreList.length) {
							this.page = this.page + 1;
						} else {
							this.finished = true;
						}

					})
			},
			onRefresh() {
				this.refreshing = true;
				this.finished = false;
				this.isLoading = true;
				this.page = 1;
				this.loadMore();
			},
			loadMore() {
				// 加载完毕

				if (this.refreshing) {
					this.fiberCoreList = [];
					this.refreshing = false;
				}
				this.getTaskListByAdminT();
				
			},
			goBack() {
				uni.navigateBack()
			},
			// 跳转到详情页面
			jumpDetail(id) {
				uni.navigateTo({
					url: `/pages/standingBook/opticalPathManagement/bussinessDetail/bussinessDetail?title=纤芯详情&objId=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f6fa;
	}

	.header {
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.cable-item {
		width: calc(100% - #{px2vw(60)});
		padding: 0 px2vh(40);
		background: #fff;
		box-sizing: border-box;
		margin: px2vh(30) auto;
		border-radius: px2vh(16);

		.cable-text {
			font-size: px2vh(36);
			line-height: px2vh(62);
			padding: px2vh(38) px2vw(10);
			color: #A2A2A2;
			border-top: px2vh(2) solid #E5E5E5;

			& span {
				color: #666;
				font-weight: 600;
			}
		}

		.cable-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: px2vh(140);

			& .cable-title-left {
				display: flex;
				align-items: center;

				.cable-title-img {
					// width: px2vh(64);
					// height: px2vh(64);
					margin-top: px2vh(-10);
					margin-right: px2vh(25);

					image {
						width: px2vh(64);
						height: px2vh(64);
						vertical-align: middle;
					}
				}

				.cable-title-name {
					font-size: px2vh(42);
					font-weight: bold;
					line-height: px2vh(50);
				}
			}
		}
	}

	.title-icon {
		// width: 14%;
		height: px2vh(50);
		border-radius: px2vh(10);
		font-weight: bold;
		text-align: center;
		line-height: px2vh(50);
		font-size: px2vh(32);
		padding: 0 px2vw(10);
	}

	.green {
		background: rgba(65, 220, 131, 0.1);
		color: #41dc83;
	}

	.red {
		background-color: rgba(255, 112, 112, 0.1);
		color: #ff7070;
	}
</style>